<template>
	<view class="wy-load-page wy-flex-column">
		<slot name="body">
			<view class="wy-flex-row">
				<view class="wy-flex-1  wy-justify-center wy-flex-row" >
					<block v-if="loadingStatus=='loading'">
						 <text v-if="model.tip.loading" class="cuIcon-loading2 cuIconfont-spin wy-color-second wy-size-l"></text>
						 <text class="wy-color-second wy-size-base">{{model.tip.loading}}</text>
					 </block>
					 <block v-else-if="loadingStatus=='wait'">
						 <text @click="loadData()" class="wy-color-second wy-size-base">{{model.tip.wait}}</text>
					 </block>
					 <block v-else-if="loadingStatus=='exction'">
					 	 <text class="wy-color-second wy-size-base"> {{model.tip.exction}}</text>
					 </block>
					 <block v-else-if="loadingStatus=='nomore'">
						 <slot name="nomore">
						 	 <text class="wy-color-second wy-size-base">{{model.tip.nomore}} </text>
						 </slot>

					</block>
					 <view v-if="loadingStatus=='nodata'">
						  <slot name="nodata">
								<text  class="wy-color-second wy-size-base">{{model.tip.nodata}} </text>
							</slot>
					 </view>
				</view>
			</view>
		</slot>
		<view v-if="themeType==1" class="wy-flex-row  wy-justify-center wy-align-center wy-ps-top-s wy-ps-bottom-s">
			<view class="wy-flex-row wy-align-center" v-if="totalRows>0">
				<view class="wy-flex-row wy-align-center">
						<text class="cuIcon-back margin-right wy-size-l--"  @click="jumpPage(lastPageIndex)" :class="[lastPageIndex>0?'wy-color-primary':'wy-color-second']"></text>
						<text class="wy-ms-right-ss wy-ms-left-ss wy-size-l--" @click="jumpPage(item.value)" :class="[item.active?'wy-color-primary':'wy-color-second']" v-for="(item,index) in pageIndes" :key="index">
						{{item.name}}
						</text>
						<text class="cuIcon-right wy-ms-left-base wy-size-l--" @click="jumpPage(nextPageIndex)" :class="[nextPageIndex>0?'wy-color-primary':'wy-color-second']"></text>
				</view>
				<view></view>
				<view class="wy-flex-row wy-align-center wy-ms-left-base">
					<text class="wy-color-second wy-size-l--">{{totalTxt}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {wy,pubfn} from '../../libs/context.js'
	import {wyProps} from '../../libs/props.js'; 
	export default {
		name:'wy-load-page',
		mixins: [wyProps],
		data() {
			return {
				model:{
					theme:{},
					query:{ //参数
					},
					data:{},
					page:{ //页面
						p:1, //从第一页开始
						n:10
					},
					tip:{ //提示
						loading:'正在加载...',
						wait:'点击加载下一页',
						nomore:'无更多数据',
						exction:'数据接口异常,请刷新重试!',
						nodata:'' //无数据
					},
					field:{ //字段
						p:'p',
						n:'n',
						list:'list',
						total:'total',
						data:'data' //接口返回的数据外包括一层
					},
					state:{ //状态
						reset:false,//是否重置刷新
						PullDownRefresh:false, //是否开启下拉刷新
						cache:false,
						showExction:true //
					},
					cache:{
						table:'',
						key:'',
						auto:true,//自动缓存一页数据
						size:50,
						order:{
							list:'asc',
							dateline:'desc'
						}
					},
					event:{//事件
						getPage:(e)=>{
							return new Promise((resolve, reject)=>{
								console.log(e)
							})
						},
						pushData:(e)=>{
							//console.log(e)
						},
						resetData:(e)=>{
							//console.log(e)
						}
					},
					dely:{
						reset:300
					}
				},
				pageIndex:1,
				jumpIndex:0,
				totalRows:0,
				loadingStatus:'none',  
				loadTime:0 ,//加载次数
				dfQuery:{}
			}
		},
		props: {
			themeType:{
				type:Number,
				default:0
			}
		},
		watch:{
			dataSource:{
				handler(){
					this.init()
				},
				deep:true
			}
		},
		created() { 
			this.init()
		},
		mounted() { 
			this.$emit('mounted')
		},
		computed:{
			themeModel(){
				var theme={
					small:{
						 
					},
					wide:{
			
					}
				}
				//默认样式配置
				var model={
						 
				}
				if(this.screenSize && theme.hasOwnProperty(this.screenSize)){
					var _model=theme[this.screenSize]
					model=Object.assign(model,_model)
				}
				return model
			},
			totalTxt(){
				var format=this.locale('共{0}条')
				//return format
				return wy&&wy.pubfn? wy.pubfn.format(format,this.totalRows):''
			},
			lastPageIndex(){
				let {pageIndex,totalRows,jumpIndex}=this
				var current=jumpIndex>0?jumpIndex:parseInt(pageIndex)-1 //当前页
				if(current-1>0){
					return current-1
				}
				else{
					return -1
				}
			},
			nextPageIndex(){
				let {pageIndex,totalRows,jumpIndex}=this
				var current=jumpIndex>0?jumpIndex: parseInt(pageIndex)-1 //当前页
				var maxIndex=current
				if(this.pageIndes.length>0){
					maxIndex=this.pageIndes[this.pageIndes.length-1].value
				}
				if(current+1<=maxIndex){
					return current+1
				}
				else{
					return -1
				}
			},
			pageIndes(){
				let list=[]
				let {pageIndex,totalRows,jumpIndex}=this
				var current=jumpIndex>0?jumpIndex:parseInt(pageIndex)-1 //当前页
				//current=30
				let {n}=this.model.page
				var totalPage= parseInt(totalRows/n)  //总页数
				if((totalPage+1)*n>totalRows){
					totalPage=totalPage+1
				}
				//首页和最后一页加上
				list.push({
					name:1,
					value:1,
					active:1==current
				})
				var cuIndex=1
				if(current-4>0){
					list.push({
						name:'...',
						value:2,
						active:false
					})
					cuIndex=2
				}
				if(current>totalPage-3){
					for(let i=totalPage-3;i<totalPage;i++){
						if(i>cuIndex &&  list.length<5){
							list.push({
								name:i,
								value:i,
								active:i==current
							})
							cuIndex=i
						}
					}
				}
				else{
					if(list.length==2){
						cuIndex=current-2
					}
					else if(list.length<2 && cuIndex<current-3){
						cuIndex=current-3
					}

					for(let i=current-5;i<current+5;i++){
						if(i>cuIndex && i<=totalPage && (list.length<5)){
							list.push({
								name:i,
								value:i,
								active:i==current
							})
							cuIndex=i
						}
					}
				}
				if(totalPage>cuIndex+1){
					list.push({
						name:'...',
						value:cuIndex+1,
						active:false
					})
					cuIndex++
				}
				if(totalPage>cuIndex){
					list.push({
						name:totalPage,
						value:totalPage,
						active:current==totalPage
					})
				}

			if(list.length>2 &&list[1].name=='...'){
				list[1].value=list[2].value-1
			}
			if(list.length>2&&list[list.length-2].name=='...'){
				list[list.length-2].value=list[list.length-3].value+1
			}
				return list
			}
		},
		methods: { 
			locale(key,iscontent=true,group=''){
				 return wy.locale(key,iscontent,group)
			},
			init(){ 
				this.model=pubfn.deepMerge(this.model,this.dataSource)
				this.pageIndex=this.model.page.p
			},
			getStatus(){
				return this.loadingStatus
			},
			jumpPage(pageIndex){
				this.jumpIndex=pageIndex
				if(pageIndex>0){
					this.loadData({
						state:{ //状态
							reset: true
						},
						page:{
							p:pageIndex
						},
						query:this.dfQuery
					})
				}

			},
			async loadData(_option=null){
				if(_option){
					this.model.query={}
					this.model=pubfn.deepMerge(this.model,_option)
				}
				this.dfQuery=this.model.query
				//如果重置，则重新翻页
				if(this.model.state.reset){
					this.pageIndex=this.model.page.p
					this.loadingStatus='wait'
				}
				if(this.loadingStatus=='nomore'){
					return new Promise((resolve)=>{
						this.$emit('loadsuccess',this.loadingStatus)
						resolve({list:[],total:0})
					})
				}
				let {p,n,list,total,data}=this.model.field
				let query={
					[p]:this.pageIndex,
					[n]:this.model.page.n,
					...this.model.query
				}
				this.loadTime++
				return new Promise((resolve, reject)=>{
					var events=pubfn.deepClone(this.model.event)
					let resOption={
						reset:this.model.state.reset,
						query
					}
					if(events.getPage!=null){
						let that=this
						that.loadingStatus='loading'
						events.getPage(query,that.model.data).then((res)=>{
							if(res.hasOwnProperty(data)){
								res=res[data]
							}
							if(!list){ //列表字段为最外层
								res={'list':res}
								list='list'
							}
							var totalData=0
							if(total&&res.hasOwnProperty(total)){
								totalData=res[total]
							}
							this.totalRows=parseInt(totalData)
							const listData=res[list]
							//处理
							var loadingStatus=''
							if(listData){
								if(listData.length<that.model.page.n||that.totalRows==(that.model.page.n*that.pageIndex)){
									loadingStatus='nomore'
								} else{
									that.pageIndex++
									loadingStatus='wait'
								}
							}
							else{
								loadingStatus='exction'
							}
							if(totalData==0){
								loadingStatus='nodata'
							}
							var isReset=that.model.state.reset
							if(that.model.state.reset){
								that.model.state.reset=false
								if(events.resetData){
									events.resetData(resOption)
								}
								if(that.model.state.PullDownRefresh){
									setTimeout(function(){
										that.$emit('stopPullDownRefresh',true)
										uni.stopPullDownRefresh()
									},500)
								}
							}
							if(events.pushData){
								if(isReset&&that.loadTime>1){
									setTimeout(()=>{
										events.pushData({list:listData,total:totalData,status:loadingStatus},resOption)
										that.loadingStatus=loadingStatus
									},that.model.dely.reset)
								}else{
									events.pushData({list:listData,total:totalData,status:loadingStatus},resOption)
									that.loadingStatus=loadingStatus
								}
							}
							 else{
								 that.loadingStatus=loadingStatus
							 } 
							that.$emit('loadsuccess',loadingStatus)
							resolve({list:listData,total:totalData})
						}).catch((e)=>{
							that.loadingStatus='exction'
							if(that.model.state.reset){
								/*that.dataSet.state.reset=false
								if(that.dataSet.event.resetData){
									that.dataSet.event.resetData(option)
								}
								*/
							   if(that.model.state.showExction&&e&&e.hasOwnProperty('msg')){
								   uni.showToast({
										title:e.msg,
										duration:3000,
										icon:'none'
								   })
							   }

							   uni.hideLoading()
								if(that.model.state.PullDownRefresh){
									setTimeout(function(){
										uni.stopPullDownRefresh()
										that.$emit('stopPullDownRefresh',false)
									},500)
								}
							}
							reject(e)
						})
					} else{
						reject('getPage未定义')
					}
				})
			} 
		}
	}
</script>

<style>

</style>
